<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            display: none;
        }

        table , th , td{
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <h1 class="login">欢饮XX登陆</h1>

    <h1 class="noLogin">
        去
        <a href="./login.html">登陆</a>
        <a href="./reg.html">注册</a>
    </h1>
    <button class="loginOut">退出</button>
    <button class="zhuXiao">注销账号</button>


    <table>
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>yy</td>
                <td>123</td>
                <td>188</td>
                <td>
                    <span>删除</span>
                    <span>修改密码</span>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script src="../../js/tools.js"></script>
    <script>

        // 判断是否登陆   
        //      在登陆的时候  使用了  USER_LOGIN 标记过了
        //      判断是否登陆  就查询是否有 USER_LOGIN


        // 退出 --- 退出当前账号    USER_LOGIN  删掉

        // 注销账号
        //    当前是登陆状态 才可以注销
        //    把账号删掉   登陆状态也删掉   


        const phone = localStorage.getItem('USER_LOGIN') ;
        if(phone) {
            // alert('已经登陆')
            get('.login').style.display = 'block' ;
            get('.login').innerHTML = `欢饮${phone}登陆`;
        } else {
            // alert('还没登陆') ;
            get('.noLogin').style.display = 'block' ;
        }


        // 退出
        const oTc = get('.loginOut') ;
        oTc.onclick = function() {
            // 判断是否登陆  --- 只有登陆了才可以退出
            if(!phone) {
                return alert('您还没有登陆呢');
            }
            localStorage.removeItem('USER_LOGIN');
            // 重新进入登陆页面
            location.href = './login.html';
        }


        // 注销账号
        const oZx = get('.zhuXiao') ;
        oZx.onclick = function() {
            // 判断是否登陆  --- 只有登陆了才可以退出
            if(!phone) {
                return alert('您还没有登陆呢');
            }
            // 退出当前账号
            localStorage.removeItem('USER_LOGIN');
            // 注销当前账号
            localStorage.removeItem('tel' + phone);
            // 重新进入注册页面
            location.href = './reg.html';
        }



        // 显示用户列表
        let res = '' ;
        for(let i = 0 ; i < localStorage.length ; i++) {
            let key = localStorage.key(i) ;
            if(key.includes('tel')) {
                let val = localStorage.getItem(key);
                let o = JSON.parse(val);
                console.log(o);
                res += `
                    <tr>
                        <td>${o.username}</td>
                        <td>${o.password}</td>
                        <td>${key.replace('tel' , '')}</td>
                        <td>
                            <span onclick="del('${key}' , this)">删除</span>
                            <span onclick="changePwd('${key}' ,'${o.username}' ,this)">修改密码</span>
                        </td>
                    </tr>
                `
            }
            
        }

        get('tbody').innerHTML = res ;




        function del(phone , _this) {
            // console.log('删除');
            localStorage.removeItem(phone);
            // 
            _this.parentElement.parentElement.remove();
        }


        // 修改密码  
        //    覆盖之前的数据
        function changePwd(phone , username , _this) {
            console.log('修改密码');
            const newPwd = prompt('请输入新的密码');
            if(newPwd) {
                // 修改密码实际上就是覆盖之前的
                //    phone
                console.log(newPwd , phone);
                // 
                const o = {
                    username ,
                    password : newPwd 
                }
                localStorage.setItem(phone , JSON.stringify(o));
                _this.parentElement.previousElementSibling.previousElementSibling.innerHTML = newPwd;
            }
        }
    

    </script>
    
</body>
</html>